(function(){
  function injectBottomNav(){
    // 已存在则不重复注入
    if (document.getElementById('global-bottom-nav')) return;
    
    console.log('开始加载底部导航组件...');
    
    fetch('bottom-nav.html', { cache: 'no-cache' })
      .then(res=>{
        console.log('fetch响应状态:', res.status);
        if (!res.ok) {
          throw new Error('HTTP ' + res.status);
        }
        return res.text();
      })
      .then(html=>{
        console.log('成功获取HTML内容，长度:', html.length);
        const container = document.createElement('div');
        container.innerHTML = html;
        document.body.appendChild(container);
        console.log('底部导航组件已注入到页面');
        
        // 初始化底部导航功能
        initBottomNavFunctionality();
      })
      .catch(err=>{
        console.error('加载底部导航失败:', err);
        // 如果fetch失败，尝试直接创建底部导航
        createBottomNavDirectly();
      });
  }
  
  function createBottomNavDirectly() {
    console.log('使用直接创建方式加载底部导航');
    const bottomNavHTML = `
      <style>
        .bottom-nav {
          position: fixed !important;
          bottom: 0 !important;
          left: 0 !important;
          right: 0 !important;
          background-color: #fff;
          border-top: 1px solid #f0f0f0;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0px 0;
          z-index: 1000 !important;
          height: 48px !important;
          transform: translateZ(0) !important;
          -webkit-transform: translateZ(0) !important;
        }
        .bottom-nav::before {
          content: '';
          position: absolute;
          top: -20px;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 40px;
          background: #fff;
          border-radius: 40px 40px 0 0;
          z-index: -1;
        }
        .bottom-nav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-decoration: none;
          color: #666;
          flex: 1;
          position: relative;
          height: 40px; /* 固定高度 */
          padding: 4px 0;
          box-sizing: border-box;
          margin: 0;
          border: 0;
          outline: none;
        }
        .bottom-nav-item.active {
          color: #ff6900;
          /* 确保激活状态与非激活状态高度一致 */
          height: 40px;
          padding: 4px 0;
          box-sizing: border-box;
        }
        .bottom-nav-icon {
          width: 24px;
          height: 24px;
          margin-bottom: 2px;
          display: block;
        }
        .bottom-nav-icon-one {
          width: 60px;
          height: 60px;
        }
        .bottom-nav-text {
          font-size: 10px;
          text-align: center;
          line-height: 1;
          margin: 0;
          padding: 0;
          display: block;
        }
        .bottom-nav-sell-btn {
          background-color: #ff6900;
          color: white;
          border-radius: 50%;
          font-size: 10px;
          font-weight: bold;
          text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: -15px 8px 0 8px;
          position: relative;
          z-index: 1001;
          padding: 0;
          line-height: 1;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
      </style>
      <div class="bottom-nav" id="global-bottom-nav">
        <a href="index.html" class="bottom-nav-item active" data-tab="home">
          <img class="bottom-nav-icon" src="image/bottom_nav/ic_tabbar_home_sel.png" alt="闲鱼">
          <span class="bottom-nav-text">闲鱼</span>
        </a>
        <a href="local.html" class="bottom-nav-item" data-tab="city">
          <img class="bottom-nav-icon" src="image/bottom_nav/ic_tabbar_city_nor.png" alt="济南">
          <span class="bottom-nav-text">济南</span>
        </a>
        <a href="#" class="bottom-nav-sell-btn" data-tab="sell">
          <img class="bottom-nav-icon-one" src="image/bottom_nav/no_privacy_login_icon.webp" alt="">
        </a>
        <a href="message.html" class="bottom-nav-item" data-tab="message">
          <img class="bottom-nav-icon" src="image/bottom_nav/ic_tabbar_message_nor.png" alt="消息">
          <span class="bottom-nav-text">消息</span>
        </a>
        <a href="center.html" class="bottom-nav-item" data-tab="my">
          <img class="bottom-nav-icon" src="image/bottom_nav/ic_tabbar_my_nor.png" alt="我的">
          <span class="bottom-nav-text">我的</span>
        </a>
      </div>
    `;
    
    const container = document.createElement('div');
    container.innerHTML = bottomNavHTML;
    document.body.appendChild(container);
    console.log('底部导航组件已直接创建并注入到页面');
    
    // 初始化底部导航功能
    initBottomNavFunctionality();
  }

  function initBottomNavFunctionality() {
    const bottomNavItems = document.querySelectorAll('.bottom-nav-item, .bottom-nav-sell-btn');
    
    // 图标映射
    const iconMap = {
      'home': {
        active: 'image/bottom_nav/ic_tabbar_home_sel.png',
        inactive: 'image/bottom_nav/ic_tabbar_home_nor.png'
      },
      'city': {
        active: 'image/bottom_nav/ic_tabbar_city_sel.png',
        inactive: 'image/bottom_nav/ic_tabbar_city_nor.png'
      },
      'message': {
        active: 'image/bottom_nav/ic_tabbar_message_sel.png',
        inactive: 'image/bottom_nav/ic_tabbar_message_nor.png'
      },
      'my': {
        active: 'image/bottom_nav/ic_tabbar_my_sel.png',
        inactive: 'image/bottom_nav/ic_tabbar_my_nor.png'
      }
    };

    // 根据当前页面设置激活状态
    const path = location.pathname.split('/').pop() || 'index.html';
    const map = {
      'index.html': 'home',
      'local.html': 'city',
      'message.html': 'message',
      'center.html': 'my'
    };
    const current = map[path];
    
    // 移除所有active类并设置当前页面的激活状态
    bottomNavItems.forEach(el=>el.classList.remove('active'));
    if (current) {
      const active = document.querySelector(`[data-tab="${current}"]`);
      if (active) active.classList.add('active');
    }

    // 更新图标
    function refreshIcons(activeTab){
      bottomNavItems.forEach(item=>{
        const tab = item.getAttribute('data-tab');
        const img = item.querySelector('.bottom-nav-icon');
        if (!tab || !img || !iconMap[tab]) return;
        img.src = (tab === activeTab) ? iconMap[tab].active : iconMap[tab].inactive;
      });
    }
    refreshIcons(current);

    // 添加点击事件
    bottomNavItems.forEach(item => {
      item.addEventListener('click', function(e) {
        // 检查是否有实际的链接
        const href = this.getAttribute('href');
        if (href && href !== '#') {
          // 如果有实际链接，允许默认跳转行为
          return;
        }
        
        // 否则阻止默认行为并执行切换逻辑
        e.preventDefault();
        
        // 移除所有active类
        bottomNavItems.forEach(navItem => {
          navItem.classList.remove('active');
        });
        
        // 添加active类到当前点击的项目
        this.classList.add('active');
        
        // 更新图标
        const tab = this.getAttribute('data-tab');
        refreshIcons(tab);
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectBottomNav);
  } else {
    injectBottomNav();
  }
})();